<!-- 地铁线路与客运量对比统计 -->
<template>
  <div class="h-100 w-100">
    <div style="height: 60px; margin-top: 40px;">
      <tablleBar
        @submit-swich="swichTable"
        :list="['雨水资源利用率', '管网漏损率']"
      ></tablleBar>
    </div>
    <div v-if="activeItem == 0" class="w-100 h-10 d-flex justify-content-end" style="position: absolute;right: 0; top: 70px;">
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="['rgba(3, 230, 254, 1)']"
        :text="['目标取值']"
      >
      </FakeLegend>
      <FakeLegend :color="['rgba(184, 235, 143, 1)']" :text="['建设后实际值']">
      </FakeLegend>
    </div>
    <div class="szy2-box" style="width: 100%;height: calc(100% - 80px);overflow-x: auto">

      <div
        id="szy2"
        style="width: 100%"
        class="h-100"
        v-if="activeItem == 0"
      ></div>

      <div id="szy2-1" class="w-100 h-100" v-if="activeItem == 1"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";
import { chartOptions } from "@/hook/chartOptions";
import {useFunc} from "@/hook/useFunc";
import { Bottom } from "@element-plus/icons-vue";

const option: any = chartOptions().twoBarOption(echarts, ['目标取值', '建设后实际值']);

let myChart: any;
const jsonData: any = inject("jsonData");
const activeItem = ref(0);

const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.jsgl.szy2[activeItem.value];
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {

      nextTick(() => {
        if(activeItem.value == 0){
          setOption(val)
        }else {
          console.log(val)
          setOption1(val)
        }
      })
    }
  }
);

const swichTable = (item: any) => {
  activeItem.value = item;
};

const setOption = (val: any) => {
  myChart = echarts.init(document.getElementById("szy2") as HTMLElement);

  myChart.setOption(option);
  myChart.setOption({
    xAxis: [
      {
        data: useOptions().paishuiList.map((item: any) => item.label),
        axisLabel: {
          interval: "auto", // 自动计算间隔
          minInterval: 1, // 设置最小间隔为1
          fontSize: 20,
          color: "#667A8E",
        },
      },
    ],
    yAxis: [
      {
        name: "%",
      },
    ],
    dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                end: 60,
                bottom: "15%",
            }
        ],
    grid: {
      left: "5%",
      right: "5%",
      bottom: "10%",
      top: "18%"
    },
    series: [{ data: val[0] }, { data: val[1] }],
  });

  const scrollContainer = document.querySelector(".szy2-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
}
const colorSingleList = [
  "rgba(184, 235, 143, 1)",
];

const setOption1 = (val: any) => {
  myChart = echarts.init(document.getElementById("szy2-1") as HTMLElement);

  let option1: any = {
    color: colorSingleList,
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(28,64,81,0.7)",

      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      textStyle: {

        fontSize: 14,
        color: "#000",
      }
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "0",
      top: "15%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      type: "category",
      data: useOptions().year(),
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '%',
        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: '#667A8E',
          formatter: "{value}" + '',
        },
        splitLine: { // 配置分割线
          show: true,
          lineStyle: {
            color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
            type: 'solid' // 实线
          }
        }
      }

    ],
    series: [
      {
        name: "月湖系统管网漏损率",
        type: "line",
        data: [],
        color: 'rgba(3, 230, 254, 1)',
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(184, 235, 143, 0.8)' // 颜色渐变起始颜色
            }, {
              offset: 0.3,
              color: 'rgba(184, 235, 143, 0)' // 颜色渐变结束颜色
            }])
          }
        }

      }
    ]
  };

  myChart.setOption(option1)

  myChart.setOption({
    series: [
      { data: val },
    ],
  });

}

onMounted(() => {

});
</script>

<style></style>
